<!--
 * @Author: folusGan 245942153@qq.com
 * @Date: 2024-07-08 15:20:50
 * @LastEditors: folusGan 245942153@qq.com
 * @LastEditTime: 2024-10-30 15:29:57
 * @Description: 
-->
<template>
  <div>
    <el-row>
      <el-col :span="6" v-for="(imgTitle, i) in imgs" class="item">
        <div class="pad-5" @click="goDetail(i + 1)">
          <div :class="['main-page', `product-conrainer-${i + 1}`]"></div>
          <h1 class="text-center">{{ imgTitle }}</h1>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import i18n from '@/lang/index'
const imgDetail = [
  {
    title: 'T-series',
    Description: {
      thickness: '70/80/90mm',
      color: i18n.t('goldOrSiler'),
      direction: i18n.t('adjustableBothSide'),
    },
  },
  {
    title: 'H-series',
    Description: {
      thickness: '75/80/90/100/110mm',
      color: i18n.t('goldOrSiler'),
      direction: i18n.t('adjustableBothSide'),
    },
  },
  {
    title: 'YW1685',
    Description: {
      thickness: '70mm',
      color: i18n.t('goldOrSiler'),
      direction: i18n.t('adjustableBothSide'),
      others: i18n.t('bothSideLockNoTwistBotton'),
    },
  },
  {
    title: 'YW1686',
    Description: {
      thickness: '70mm',
      color: i18n.t('goldOrSiler'),
      direction: i18n.t('adjustableBothSide'),
      direction: i18n.t('bothSideLockNoTwistBotton'),
    },
  },
]
export default {
  data() {
    return {
      imgs: ['T-series', 'H-series', 'YW1685', 'YW1686'],
    }
  },
  methods: {
    goDetail(i) {
      this.$router.push({
        path: '/products/product-detail',
        query: {
          imgUrl: `cylinder/cylinder-0${i}`,
          description: imgDetail[i - 1].Description,
          title: imgDetail[i - 1]?.title,
          detail: `Cylinder-detail-01`,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.item {
  padding: 5px;
}

$pgs: 1, 2, 3, 4;
@each $i in $pgs {
  .product-conrainer-#{$i} {
    background-image: url('../../assets/imgs/cylinder/Cylinder-0' + #{$i} + '.png');
  }
}
</style>
